<script setup lang="ts">
defineOptions({
  name: "Orderlist"
});

import { ref, reactive, onMounted } from "vue";
import {
  getOrderList,
  editOrder,
  deleteOrder,
  getUserOrderList
} from "@/api/order";
import { message } from "@/utils/message";
import { pay_request } from "@/api/user";

onMounted(() => {
  getList();
});
//获取订单
const getList = async () => {
  user_type.value = localStorage.getItem("user_type");
  let res;
  if (user_type.value == "1") {
    res = await getOrderList(orderPagin);
  } else {
    res = await getUserOrderList(orderPagin);
  }
  tableData.value = res.data.data;
  console.log(res.data.data);
  total.value = res.data.count;
};
//搜索
const tableData = ref([]);
const user_type = ref("");

const dialogOverflowVisible = ref(false);
//分页
const orderPagin = reactive({
  page: 1,
  count: 10,
  key: ""
});
const total = ref(20);
const handleCurrentPageChange = async newPage => {
  orderPagin.page = newPage;
  getList();
};
const handlePageSizeChange = async newSize => {
  orderPagin.count = newSize;
  getList();
};

let form = reactive({
  trade_id: "",
  trade_type: "",
  trade_state: "",
  price: ""
});
const order_state = [
  {
    label: "未支付",
    value: 0
  },
  {
    label: "已支付",
    value: 1
  }
];
const order_type = [
  {
    label: "购买",
    value: 0
  },
  {
    label: "续费",
    value: 1
  },
  {
    label: "其他",
    value: 3
  }
];
const findOrder = async () => {
  getList();
};
function show_table(data) {
  Object.keys(data).forEach(key => {
    form[key] = data[key];
  });
}

// 删除订单
const handleDelete = async (index: number, row) => {
  console.log(row.trade_id);
  let res = await deleteOrder({ trade_id: row.trade_id });
  console.log("删除结果", res.data.code);
  if (res.data.code == 200) {
    //更新数据
    let res = await getOrderList(orderPagin);
    tableData.value = res.data.data;
    total.value = res.data.count;
    message("删除成功", { type: "success" });
  }
};

//提交数据
const onSubmit = async () => {
  console.log("submit!", form);
  let res = await editOrder(form);
  console.log("修改结果", res);
  if (res.data.code == 200) {
    message("修改成功", { type: "success" });
    let res = await getOrderList(orderPagin);
    tableData.value = res.data.data;
    dialogOverflowVisible.value = false;
  }
};
//支付订单
const pay_url = ref("");
const pay_dialog = ref(false);
const pay_src = ref("");
const pay = async data => {
  pay_request({ pay_type: data.pay_type, trade_id: data.trade_id }).then(
    res => {
      console.log(res, "准备支付");
      if (res.data.code == 200) {
        message("购买成功！", { type: "success" });
        getList();
      } else if (res.data.data.type == "html") {
        pay_url.value = res.data.data.html;
        pay_dialog.value = true;
      } else {
        pay_src.value = res.data.data.img;
        pay_dialog.value = true;
      }
    }
  );
};
</script>

<template>
  <div class="body">
    <div class="table_box">
      <el-table class="table_el" :data="tableData" style="width: auto">
        <el-table-column label="订单ID" prop="trade_id" show-overflow-tooltip />
        <el-table-column label="订单种类" show-overflow-tooltip>
          <template #default="scope">
            <span v-if="scope.row.trade_table == 'container'">
              {{ "容器订单" }}
            </span>
            <span v-if="scope.row.trade_table == 'instance'">
              {{ "虚拟机订单" }}
            </span>
            <span v-if="scope.row.trade_table == 'container_connect'">{{
              "容器网络订单"
              }}</span>
            <span v-if="scope.row.trade_table == 'user'">{{
              "用户订单"
              }}</span></template>
        </el-table-column>
        <el-table-column v-if="user_type == '1'" label="用户ID" prop="user_id" show-overflow-tooltip />
        <el-table-column label="ID" show-overflow-tooltip>
          <template #default="scope">
            <span v-if="scope.row.trade_table == 'container'">
              {{ scope.row.trade_table_id }}
            </span>
            <span v-if="scope.row.trade_table == 'instance'">
              {{ scope.row.trade_table_id }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="价格/元" prop="price" show-overflow-tooltip />
        <el-table-column label="创建时间" prop="created_at" show-overflow-tooltip />
        <el-table-column label="到期时间" prop="good_become_time" show-overflow-tooltip />
        <el-table-column>
          <template #header>订单类型</template>
          <template #default="scope">
            {{
              scope.row.trade_type == 0
                ? "购买"
                : scope.row.trade_type == 1
                  ? "续费"
                  : scope.row.trade_type == 2
                    ? "升级"
                    : scope.row.trade_type == 3
                      ? "退款"
                      : scope.row.trade_type == 4
                        ? "重装"
                        : scope.row.trade_table == "user"
                          ? "充值"
                          : "其他"
            }}
          </template>
        </el-table-column>

        <el-table-column>
          <template #header>订单状态</template>
          <template #default="scope">
            <el-tag v-if="scope.row.trade_state == 1" type="success">已完成</el-tag>
            <el-tag v-if="scope.row.trade_state == 0 && user_type == '0'" type="danger" :title="'点击去支付'"
              @click="pay(scope.row)">未支付</el-tag>
            <el-tag v-if="scope.row.trade_state == 0 && user_type == '1'" type="danger">未支付</el-tag>
          </template>
        </el-table-column>
        <el-table-column v-if="user_type == '1'" width="200">
          <template #header>
            <el-input v-model="orderPagin.key" size="small" placeholder="关键字筛选" @blur="findOrder" />
          </template>
          <template #default="scope">
            <el-button size="small" @click="
              show_table(scope.row);
            dialogOverflowVisible = true;
            ">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="table_pagination">
        <el-pagination background layout="prev, pager, next,sizes" :total="total" :current-page="orderPagin.page"
          :page-size="orderPagin.count" :page-sizes="[10, 20, 50, 100]" @update:current-page="handleCurrentPageChange"
          @update:page-size="handlePageSizeChange" />
      </div>
    </div>

    <el-dialog v-model="dialogOverflowVisible" title="订单信息" width="500" draggable overflow>
      <div>
        <el-form :model="form" label-width="auto" style="max-width: 600px">
          <el-form-item label="订单状态">
            <el-select v-model="form.trade_state" placeholder="请选择" style="width: 240px">
              <el-option v-for="item in order_state" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="订单类型">
            <el-select v-model="form.trade_type" placeholder="请选择" style="width: 240px">
              <el-option v-for="item in order_type" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="价格" required>
            <el-input v-model="form.price" placeholder="请输入价格" required />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogOverflowVisible = false">关闭</el-button>
          <el-button type="primary" @click="onSubmit"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="pay_dialog" title="支付" style="width: 90%; height: 1000px">
      <iframe v-if="pay_url != ''" :srcdoc="pay_url" frameborder="0" style="width: 100%; height: 800px" />
      <img v-else :src="pay_src" />
    </el-dialog>
  </div>
</template>

<style>
.table_box {
  display: flex;
  flex-direction: column;
  height: 50%;
}

.table_box .table_el {
  flex: 1;
}

.table_pagination {
  background-color: #fff;
  padding: 8px 30px;
  display: flex;
  justify-content: space-between;
}
</style>
